<template>
    <div>
        <aside class="l_box">
            <sort/>
            <search/>
            <phone/>
            <recom/>
        </aside>
        <main class="r_box">
            <div class="gbook">
                <div v-for="(g,index) in gbook_info" :key="index" class="hf_context">

                    <div class="fb">
                        <ul>
                            <p class="fbtime"><span>{{g.gb_time}}</span>{{g.gb_name}}</p>
                            <p class="fbinfo">{{g.gb_content}}</p>
                        </ul>
                    </div>

                    <template v-if="g.gb_hf.gb_hf_name !== ''">
                        <div class="hf">
                            <ul v-for="(hf,index) in g.gb_hf" :key="index">
                                <p class="zzhf"><font color="#FF0000">{{hf.gb_hf_name}}：</font>{{hf.gb_hf_content}}</p>
                            </ul>
                        </div>
                    </template>

                    <template v-else="g.gb_hf.gb_hf_name === ''">
                        <div class="hf">
                            还没有回复哦 ~
                        </div>
                    </template>
                </div>

                <div class="gbox">
                    <form action="../../enews/index.php" method="post" name="form1" id="form1">
                        <p><strong>来说点儿什么吧...</strong></p>
                        <p><span> 您的姓名:</span>
                            <input name="name" type="text" id="name">
                            *</p>
                        <p><span>联系邮箱:</span>
                            <input name="email" type="text" id="email">
                            *</p>
                        <p><span class="tnr">留言内容:</span>
                            <textarea name="lytext" cols="60" rows="12" id="lytext"></textarea>
                        </p>
                        <p>
                            <input type="submit" name="Submit3" value="提交">
                            <input name="enews" type="hidden" id="enews" value="AddGbook">
                        </p>
                    </form>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import {API} from "../../public/js/BlogApi";

    export default {
        name: "gbook",
        data() {
            return {
                gbook_info: [{
                    gb_id: '2001',
                    gb_time: '2018/11/20',
                    gb_name: '我是一个小草',
                    gb_content: '哇，站长好帅啊！',
                    gb_hf: [{
                        gb_hf_name: '站长',
                        gb_hf_content: '请不要这么直接'
                    }, {
                        gb_hf_name: '我是一个小草',
                        gb_hf_content: '臭不要脸'
                    }]
                }, {
                    gb_id: '2001',
                    gb_time: '2018/11/20',
                    gb_name: '我是一个大草',
                    gb_content: '哇，站长好帅啊！',
                    gb_hf: []
                }, {
                    gb_id: '2001',
                    gb_time: '2018/11/20',
                    gb_name: '我是一个中草',
                    gb_content: '哇，站长好帅啊！',
                    gb_hf: []
                }]
            }
        },
        methods: {
            get_gbook: function () {
                this.$get(API.gbookUrl).then((res) => {
                    this.gbook_info = res.data.gbook_list;
                })
            },
        }, mounted() {
            this.get_gbook();
        }
    }
</script>

<style>
    .hf_context {
        padding: 0px;
    }
</style>
